<!--仓库调拨主组件-->
<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>调拨编码</label>
                <el-input v-model="searchForm.Number" style="width:140px" placeholder="请输入调拨编码"></el-input>
            </div>
            <div>
                <label>经办人</label>
                <el-input v-model="searchForm.EmployeesName" style="width:140px" placeholder="请输入经办人"></el-input>
            </div>
            <div>
                <label>出仓库</label>
                <el-input v-model="searchForm.ExWareHouseName" style="width:140px" placeholder="请输入仓库名称"></el-input>
            </div>
            <div>
                <label>状态</label>
                <el-select v-model="searchForm.Status" style="width:140px" placeholder="请选择状态">
                    <el-option label="未审核" value="0"></el-option>
                    <el-option label="已审核" value="1"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
                <el-dropdown class="mg-l">
                    <el-button size="small" type="primary" plain>
                        <i class="el-icon-s-grid"></i>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55px"></el-table-column>
                <el-table-column fixed prop="Number" label="调拨编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ExWareHouseName" label="调出仓库" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WareHouseName" label="调入仓库" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="EmployeesName" label="经办人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Creator" label="制单人" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="Number(scope.row.Status) === 1">已审核</el-tag>
                        <el-tag type="warning" v-else>未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.CreateTime | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="调拨日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.WareHouseDate | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true" width="220px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)"
                            :disabled="Number(scope.row.Status === 1)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)"
                            :disabled="Number(scope.row.Status) === 1">删除</el-button>
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                        <el-button type="text" @click="Apply(scope.row, 1)"
                            :disabled="Number(scope.row.Status) === 1">审核</el-button>
                        <el-button type="text" @click="Apply(scope.row, 0)"
                            :disabled="Number(scope.row.Status) === 0">反审</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
        </div>

        <!--对话框-->
        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="80%" @close="closeDialog">
            <WareHouseAllocationInput :model="model" :isUpdate="isUpdate" @callback="callback"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0"></WareHouseAllocationInput>
            <WareHouseAllocationDetails :model="model"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1">
            </WareHouseAllocationDetails>
        </el-dialog>

    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import WareHouseAllocationInput from './components/WareHouseAllocationInput.vue'
import WareHouseAllocationDetails from './components/WareHouseAllocationDetails.vue'
export default {
    components: {
        Pagination,
        WareHouseAllocationInput,
        WareHouseAllocationDetails
    },
    mounted() {
        this.dataBind()
    },
    data() {
        return {
            //模型
            model: {
                Number: '',
                WareHouseName: '',
                ExWareHouseName: '',
                RealName: '',
                Creator: '',
                Status: '0',
                WareHouseDate: '',
                Remark: ''
            },
            //搜索字段
            searchForm: {
                Number: '',
                EmployeesName: '',
                ExWareHouseName: '',
                Status: ''
            },
            //分页字段
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            //对话框
            dialogDomain: {
                title: '新增仓库调拨',
                dialogVisible: false,
                dialogType: 0
            },
            isLoading: false,
            isUpdate: false,
            tableData: []
        }
    },
    methods: {
        //获取数据
        dataBind() {
            this.isLoading = true
            this.$http.get('/api/WareHouseAllocation', {
                params: {
                    PageIndex: this.pageDomain.PageIndex,
                    PageSize: this.pageDomain.PageSize,
                    Number: this.searchForm.Number,
                    EmployeesName: this.searchForm.EmployeesName,
                    ExWareHouseName: this.searchForm.ExWareHouseName,
                    Status: this.searchForm.Status
                }
            })
                .then(res => {
                    this.tableData = res.Data
                    this.pageDomain.TotalCount = res.Count
                    this.isLoading = false
                })
        },
        //分页栏
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1
            this.pageDomain.PageSize = val
            this.dataBind()
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val
            this.dataBind()
        },
        //搜索事件
        search() {
            this.pageDomain.PageIndex = 1
            this.dataBind()
        },
        //搜索栏重置按钮
        reset() {
            this.searchForm.Number = ''
            this.searchForm.EmployeesName = ''
            this.searchForm.ExWareHouseName = ''
            this.searchForm.Status = ''
        },
        //新增
        add() {
            this.dialogDomain.title = '新增仓库调拨'
            this.dialogDomain.dialogVisible = true
            this.dialogDomain.dialogType = 0
            this.isUpdate = false
        },
        //批量删除
        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return
            }
            this.$confirm('确定删除选中数据？不可恢复', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    for (var i = 0; i < this.$refs.dataForm.selection.length; i++) {
                        if (Number(this.$refs.dataForm.selection[i].Status) !== 0) {
                            this.showNotify('无效的操作，已审核或已退库的单据无法进行删除！', 'warning')
                            return false
                        }
                    }
                    var Ids = this.$refs.dataForm.selection.map(x => x.Id)
                    let params = new URLSearchParams()
                    params.append('Ids', Ids.join(','))
                    this.$http.delete('/api/WareHouseAllocation/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then(() => {
                            this.showNotify('操作成功', 'success')
                            this.dataBind()
                        })
                })
                .catch(() => { })
        },
        //审核 & 反审
        Apply(model, Status) {
            let msg = Status == 0 ? "确认反审该单据吗？" : "确认审核该单据吗？"
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.putForm('/api/WareHouseAllocation/UpdateStatus', {
                        Id: model.Id,
                        Status: Status
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { })

        },
        //编辑
        update(model) {
            if (Number(model.Status) !== 0) {
                this.showNotify('无效的操作，已审核或已退库的单据无法进行编辑！', 'warning')
                return false
            }
            this.dialogDomain.title = '编辑仓库调拨'
            this.dialogDomain.dialogVisible = true
            this.dialogDomain.dialogType = 0
            this.isUpdate = true
            model.Status = model.Status.toString()
            this.model = model
        },
        //删除行
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    if (Number(model.Status) !== 0) {
                        this.showNotify('无效的操作，已审核或已退库的单据无法进行删除！', 'warning')
                        return false
                    }

                    this.$http.delete('/api/WareHouseAllocation', {
                        data: {
                            Id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(() => {
                            this.showNotify('操作成功', 'success')
                            this.dataBind()
                        })
                })
                .catch(() => { })
        },
        //明细
        details(model) {
            this.dialogDomain.title = "仓库调拨明细"
            this.dialogDomain.dialogVisible = true
            this.dialogDomain.dialogType = 1
            model.Status = model.Status.toString()
            this.model = model

        },
        //对话框关闭后
        closeDialog() {
            this.model = {
                Number: '',
                WareHouseName: '',
                ExWareHouseName: '',
                RealName: '',
                Creator: '',
                Status: '0',
                WareHouseDate: '',
                Remark: ''
            }
        },
        //对话框回调
        callback() {
            let actionName = this.isUpdate ? '编辑' : '新增';
            this.showNotify(actionName + '仓库调拨成功', 'success');
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        },
        //导出
        exports() {
            this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading: this.$loading(),
                    url: "/api/WareHouseAllocation/Export",
                    responseType: 'blob'
                }).then((res) => {
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '仓库调拨信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })


            }).catch((err) => {
                console.log(err);
            })

        }
    }
}
</script>